<template>
  <div>
    <div
      class="music"
      :class="{ actived: currentIndex == index }"
      @click="musicPlay(index)"
      v-for="(item, index) in blockList"
      :key="item.blockId"
    >
      <div class="block">
        <div class="my_block">
          <div class="block_left">
            <div class="title">
              <div class="song_title">
                {{ item.name }}
              </div>
              <div class="song_subtitle">
                {{ (item.song?.alias || item?.alia)[0] }}
              </div>
            </div>
            <div class="singer">
              <img
                src=""
              />
              <div class="singer_name">
                {{ item.song?.artists[0].name || item?.ar[0].name }} -
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="block_right">
            <img
              src=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import { useMainStore } from "@/pinia/store.ts";
import router from "@/router/routes";
import { useRoute } from "vue-router";

const currentIndex = ref(0);
const mainStore = useMainStore();
const route = useRoute();
const active = ref(0);
const value = ref("");

const props = defineProps({
  blockList: Array,
});




const musicPlay = (index) => {
  console.log();
  router.push("/musicPlay");
};

</script>
  
<style lang="scss" scoped>
.music {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  > .block {
    display: block;
    width: 100%;
    height: 56px;
    > .my_block {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      padding: 6px 0;
      border-bottom: 1px solid #eee;
      > .block_left {
        display: block;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        > .title {
          display: flex;
          overflow:hidden;
          align-items: center;
          height: 20px;
          font-size: 16px;
          font-weight: 400;
          margin-right: 5px;
          margin-bottom: 2px;
          text-overflow: ellipsis;
          display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          > .song_title {
            display: flex;
            overflow:hidden;
            align-items: center;
            height: 20px;
            font-size: 16px;
            font-weight: 400;
            margin-right: 5px;
            margin-bottom: 2px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          > .song_subtitle {
            display: flex;
            overflow: hidden;
            align-items: center;
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            margin-left: 5px;
            margin-top: 2px;
            color: #888;
            line-height: 1.5;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }
        > .singer {
          display: flex;
          align-items: center;
          > img {
            width: 12px;
            height: 8px;
            margin-right: 2px;
          }
          > .singer_name {
            color: #888;
            font-size: 12px;
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 使用省略号表示超出部分 */
            text-align: left; /* 文本对齐方式 */
          }
        }
      }
      > .block_right {
        padding-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 22px;
          height: 22px;
        }
      }
    }
  }
}
</style>